<template>
  <page-layout>
    <a-card>
      <a-button size="large" @click="$router.go(-1)">返回</a-button>
      <a-form
        style="margin-top: 36px"
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-item label="用户名">
          <a-input
            placeholder="请输入用户名"
            size="large"
            disabled
            v-decorator="[
              'username',
              {
                initialValue: editData.username,
                rules: [{ required: false, message: '请输入用户名!' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="用户昵称">
          <a-input
            placeholder="请输入用户昵称"
            size="large"
            v-decorator="[
              'name',
              {
                initialValue: editData.name,
                rules: [{ required: false, message: '请输入用户昵称!' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="邮箱">
          <a-input
            placeholder="请输入邮箱"
            size="large"
            v-decorator="[
              'email',
              {
                initialValue: editData.email,
                rules: [{ required: false, message: '请输入邮箱!' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <!-- {{ selectDatas[0] }} -->
        <a-form-item label="原密码">
          <a-input
            type="password"
            placeholder="请输入原密码"
            size="large"
            v-decorator="[
              'old_password',
              {
                rules: [{ validator: compareToInputPassword }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="新密码">
          <a-input
            type="password"
            placeholder="请输入新密码"
            size="large"
            v-decorator="['password']"
          ></a-input>
        </a-form-item>
        <a-form-item label="确认密码">
          <a-input
            placeholder="请输入确认密码"
            size="large"
            type="password"
            v-decorator="[
              'password_confirmation',
              {
                rules: [{ validator: compareToFirstPassword }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 10 }">
          <a-button type="primary" size="large" @click="handleSubmit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-layout>
</template>

<script>
import { centerPost, center } from "@/services/user";
// import { getRoles } from "@/services/roles";
import PageLayout from "@/layouts/PageLayout";
// import { delete } from "vue/types/umd";
export default {
  name: "demand",
  components: { PageLayout },
  data() {
    this.form = this.$form.createForm(this);
    return {
      isClear: false,
      editData: {}
    };
  },
  created() {
    center().then((res) => {
      console.log(res, "res");
      let { id, username, name, email, roles, password } = res.data.data;
      this.editData = { id, username, name, email, roles, password };
      if (res.data.code !== 20000) {
        this.$message.error("出错了，请刷新页面重试");
      }
    });
  },

  computed: {},
  methods: {
    handleSelectChange() {},
    handleSubmit() {
      this.form.validateFields((err, values) => {
        console.log(err, values);
        // eslint-disable-next-line no-debugger
        // debugger;
        for (var item in values) {
          if (!values[item]) delete values[item];
        }
        if (!err) {
          // delete values["password_confirmation"];
          centerPost(values).then((res) => {
            // console.log(res, res);
            if (res.data.code === 20000) {
              this.$message.success({
                content: res.data.message || "提交成功~",
                onClose: () => {
                  this.form.resetFields();
                  this.$router.go(-1);
                }
              });
            }
          });
        }
      });
    },
    compareToInputPassword(rule, value, callback) {
      const form = this.form;
      if (form.getFieldValue("password") && !value) {
        callback("请输入原密码!");
      } else {
        callback();
      }
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (
        form.getFieldValue("password") &&
        value !== form.getFieldValue("password")
      ) {
        callback("两次输入的密码不一致!");
      } else {
        callback();
      }
    }
    // handleChange(info) {
    //   const status = info.file.status;
    //   if (status !== "uploading") {
    //     console.log(info.file, info.fileList);
    //   }
    //   if (status === "done") {
    //     this.$message.success(`${info.file.name} 上传成功~`);
    //   } else if (status === "error") {
    //     this.$message.error(`${info.file.name} file upload failed.`);
    //   }
    // },
    // beforeUpload(file, fileList) {
    //   console.log(111);
    //   console.log(file, fileList);

    //   console.log(this.form.getFieldValue("dragger"), 111);
    //   if (fileList.length > 1) {
    //     this.$message.error("头像只能上传一张哦~");
    //     return false;
    //   }
    // },
    // normFile(e) {
    //   console.log("Upload event:", e);
    //   if (Array.isArray(e)) {
    //     return e;
    //   }
    //   return e && e.fileList;
    // }
  }
};
</script>

<style lang="less" scoped>
</style>
